<template>
  <div>
    <div class="register">
      <el-row>
        <el-button type="primary" class="an" @click="createData()">提交</el-button>
      </el-row>
    </div>
    <el-row class="buju">
      <el-form>
        <el-col :span="4">
          <div class="yi">IP黑名单</div>
        </el-col>
        <el-col :span="8">
          <el-input
            class="qing"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="ipBlacklist.ip">
          </el-input>
        </el-col>
      </el-form>
    </el-row>
    <el-row style="margin-top: 15px;">
      <el-col :span="5">
        <div style="width:100px;height:100px;float: right;"></div>
      </el-col>
      <el-col :span="8">
        <div style="width:400px;height:50px;margin-left: -28px;">
          <span class="xiao">一行一个IP，被加入黑名单的IP将被禁止访问！可使用通配符，例如：202.101.20</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {addIpBlackList, getData} from '@/api/system/ipblacklist';
  import {getTenantId} from '@/utils/auth';

  export default {
    data() {
      return {
        ipBlacklist: {
          ip: ''
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getData(getTenantId()).then(response => {
          this.ipBlacklist = response.data
        }).catch(err => {
          console.log(err)
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.ipBlacklist.tenantId = getTenantId();
            addIpBlackList(this.ipBlacklist).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .register {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin-top: 20px;
    margin-left: 15px;
    padding-left: 10px;
    background-color: #e7e9ed;
    padding-top: 15px;
    padding-right: 34px;
  }

  .an {
    float: right;
    margin-top: -9px;
    height: 34px;
  }

  .hei {
    width: 100%;
    height: 44px;
    line-height: 30px;
    margin-top: 20px;
    margin-left: 15px;
    padding-left: 10px;
    background-color: #f0f3ff;
    padding-top: 10px;
  }

  .buju {
    margin-left: 15px;
    margin-top: 15px;

    .yi {
      font-size: 14px;
      // font-weight: bold;
      float: right;
      font-weight: bold;
      color: #919399;
    }
  }

  .qing {
    margin-left: 10px;
  }

  .wenzi {
    margin-left: 10px;
    margin-top: 10px;
  }

  .xiao {
    font-size: 13px;
    color: #979a9c;
  }
</style>
